<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form
        class="query-more-form"
        size="mini"
        label-width="100px"
        :model="search"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="案件编号">
              <el-input
                v-model="search.caseCode"
                class="search-ipt"
                placeholder="请输入案件编号"
                maxlength="255"
              />
            </el-form-item>
          </el-col> 
          <el-col :span="8"
            ><el-form-item label="申请部门" prop="jobTitle"
              ><el-input
                placeholder="请输入申请部门"
                v-model="search.jobTitle"
                maxlength="255" /></el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item label="审核状态" prop="auditStatus"
              ><el-select
                      class="w-100"
                      v-model="search.auditStatus"
                      placeholder="请选择审核状态"
                    >
                      <el-option
                        v-for="item in auditStatusArr"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      /> </el-select></el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="时间区间">
              <el-date-picker
                v-model="search.reportTime"
                type="datetimerange"
                size="mini"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="btn-col">
            <el-button
              size="mini"
              class="search-btn"
              type="primary"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button
              size="mini"
              class="reset-btn"
              type="primary"
              @click="clearQuery"
              >重置</el-button
            >
          </el-col>
        </el-row> 

      </el-form>
    </SearchPanel>

    <div class="table-container">
      <!-- <div class="table-tools-panel table-flex-row">
        <el-button
          class="flush-btn"
          size="mini"
          icon="el-icon-refresh"
          @click="() => handleRefresh()"
          >刷新</el-button
        >
      </div> -->
      <div class="table-list-panel">
        <el-table
          ref="table"
          v-loading="tableLoading"
          size="small"
          border
          :data="tableData"
          :height="isShow ? 'calc(100vh - 450px)' : 'calc(100vh - 335px)'"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="45" fixed="left" />
          <el-table-column
            prop="caseCode"
            label="案件编号"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            prop="status"
            label="审核状态"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="overFlagBox">
                <span v-if="scope.row.status == 0">审批中</span>
                <span v-if="scope.row.status == 1">同意审批</span>
                <span v-if="scope.row.status == 2">拒绝审批</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="applyDepartmentName"
            label="申请部门"
            show-overflow-tooltip
            width="150"
          />
           <el-table-column
            prop="applyManName"
            label="审核人"
            show-overflow-tooltip
            width="120"
          />
          <el-table-column
            prop="applyTime"
            label="申请时间"
            show-overflow-tooltip
            sortable
            width="140"
          >
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.applyTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="applyOpinion"
            label="申请事由"
            show-overflow-tooltip
          />
          
          <!-- <el-table-column
            prop="approvalTime"
            label="审核时间"
            show-overflow-tooltip
            sortable
            width="130"
          >
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.approvalTime) }}
              </div>
            </template>
          </el-table-column> -->
         
          <!-- <el-table-column
            prop="approvalOpinion"
            label="审核意见"
            show-overflow-tooltip
          /> -->
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-panel">
          <Pagination
            :total="query.total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getQueryAllListData"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗框 -->
    <TaskHistoryDialog
      custom-class="custom-dialog"
      @closeDialog="dispatchDialogVisible = false"
      :dialogVisible="dispatchDialogVisible"
      :case-code="caseCode"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import Case from "@/components/case";
import { parseTime } from "@/utils/index";
import TaskHistoryDialog from "@/views/casedeal/components/taskHistoryDialog";
import {
  categoryType,
  industryArea,
  region,
  caseMessage,
  myDispatched,
  getApply
} from "@/api/case.js";
import { getList } from "@/api/law/apelist";
export default {
  name: "CaseDealList",
  components: {
    Pagination,
    SearchPanel,
    TaskHistoryDialog,
    Case
  },
  data() {
    return {
      dispatchDialogVisible: false,
      obj: null,
      dialogType: "add",
      tableLoading: false,
      SourceTypeArr: [], // 来源
      IndustryAreaArr: [], //行业领域所有
      TitleOfPowerArr: [], //权力名称下拉框
      ChecklistArr: [], //事项清单下拉框
      form: {},
      search: {
        reportTime: null
      },

      // 审核状态
      auditStatusArr:[{
        name:'审批中',
        id:1
      },{
        name:'未通过',
        id:2
      },{
        name:'已通过',
        id:3
      },],

      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: ""
      },
      tableData: [],
      caseCode: "",
      isShow: true
    };
  },
  created() {
    this.initData();

    // 调用行业领域的接口
    this.getIndustryArea();

    // 调用获取来源类型的接口
    this.getSourceMessage();

    // 查询按钮
    this.$bus.on("formDatas", data => {
      this.tableLoading = true;
      const query = JSON.parse(JSON.stringify(this.query));
      myDispatched({
        addressCityCode: data.addressCity,
        addressCommunityCode: data.addressStreet,
        addressStreetCode: data.addressDetailedUser,
        categoryDcaCode: data.industry,
        categorySupCode: data.majorCategories,
        categorySubCode: data.subclass,
        code: data.caseCode,
        sourceCode: data.sourceCode,
        total: this.query.total,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize
      })
        .then(result => {
          let { rows, code, total } = result;
          let obj = {};
          if (code == 200) {
            this.tableData = rows;
            // 计算超时
            this.tableData.forEach(item => {
              if (item.overFlag == 0) {
                item.overFlag = "未超期";
              } else if (item.overFlag == 1) {
                item.overFlag = "已超期";
              } else {
                let time = Date.parse(new Date()) / 1000;
                if (time > item.planCompletionTime) {
                  item.overFlag = "已超期";
                } else if (time < item.planCompletionTime) {
                  item.overFlag = "未超期";
                }
              }
            });
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    });
  },
  methods: {
    parseTime,
    selectionChange(selection) {},
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
    
    // 查询回退审核列表
    getQueryAllListData() {
      this.tableLoading = true;
      // 时间参数拆分
      if (this.search.reportTime != null) {
        this.query = {
          applyType: "402",
          startTime: this.search.reportTime[0],
          endTime: this.search.reportTime[1],
          caseCode: this.search.caseCode,
          auditStatus:this.search.auditStatus,
          jobTitle:this.search.jobTitle,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        };
      } else {
        this.query = {
          applyType: "402",
          caseCode: this.search.caseCode,
          jobTitle:this.search.jobTitle,
          auditStatus:this.search.auditStatus,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        };
      }
      getApply(this.query)
        .then(result => {
          let { rows, code, total } = result;
          if (code == 200) {
            this.tableData = rows;
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 获取行业领域
    getIndustryArea() {
      industryArea({ parentId: 0 })
        .then(result => {
          let { rows } = result;
          this.IndustryAreaArr = rows;
        })
        .catch({});
    },

    // 获取来源类型
    getSourceMessage() {
      categoryType({
        sysGroup: "caseSource"
      })
        .then(result => {
          let { rows } = result;
          this.SourceTypeArr = rows;
        })
        .catch({});
    },

    // 行业领域的change事件
    industryChange(val) {
      industryArea({ parentId: val })
        .then(res => {
          this.TitleOfPowerArr = res.rows;
        })
        .catch(() => {});
    },

    // 权力名称的change事件
    powerChange(val) {
      industryArea({ parentId: val })
        .then(res => {
          this.ChecklistArr = res.rows;
        })
        .catch(() => {});
    },

    // 刷新
    handleRefresh() {
      this.clearQuery();
      this.getQueryAllListData();
    },
    // 流程
    handleUpdate(row) {
      this.caseCode = row.code;
      this.dispatchDialogVisible = true;
    },
    initData() {
      this.getQueryAllListData();
    },
    handleDetail(row) {
      sessionStorage.setItem("flushBackUrl", "/caseDetail/caseDetail2");
      this.$router.push({
        name: "CaseDetail2",
        params: {
          caseCode: row.caseCode,
          dialogType: "detail",
          buttonDisable: false,
          id: row.id
        }
      });
    },

    // 顶部查询按钮
    handleQuery() {
      this.tableLoading = true;
      // 时间参数拆分
      if (this.search.reportTime != null) {
        this.query = {
          applyType: "402",
          startTime: this.search.reportTime[0],
          endTime: this.search.reportTime[1],
          caseCode: this.search.caseCode,
          jobTitle:this.search.jobTitle,
          auditStatus:this.search.auditStatus,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        };
      } else {
        this.query = {
          applyType: "402",
          caseCode: this.search.caseCode,
          jobTitle:this.search.jobTitle,
          auditStatus:this.search.auditStatus,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        };
      }
      getApply(this.query)
        .then(result => {
          let { rows, code, total } = result;
          let obj = {};
          if (code == 200) {
            this.tableData = rows;
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 重置
    clearQuery() {
      this.search = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.overFlagBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
// ele_时间框长度
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
/deep/ .pagination-container{
  padding: 0 16px;
  margin-top: 10px;
}
</style>
